<!DOCTYPE html>
<html lang="en" ng-app="a1">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div ng-controller="c1">
    <input type="text" name="search" ng-model="inputTxt" ng-change="lightText()">
    <div class="markdown-body">
        <p ng-bind-html="text"></p>
    </div>
    <div class="testShow"></div>
</div>
<script>
    var a1=angular.module('a1',[]);
    a1.controller('c1',function($scope, $sce, $filter){
        $scope.inputTxt="";
        $scope.orginText = "HELLO";
        $scope.text = $sce.trustAsHtml($scope.orginText);
        $scope.lightText = function(){
            $scope.text = $filter('ligthTxt')($scope.orginText, $scope.inputTxt) ;
        };
    })


    a1.filter('ligthTxt',function($sce){
        return function(e,type){
            var reg = new RegExp(type,"g");
            var result="";
            //var origin="";
            if(type.length!=0&&e.indexOf(type)>-1){
                result=e.replace(reg, '<span class=\'highlight\'>' + type + '</span>');
                //origin=document.getElementsByClassName('markdown-body')[0].innerHTML;
            }else{
                result=e;
                //origin=document.getElementsByClassName('markdown-body')[0].innerHTML;
            }
            //origin=$sce.trustAsHtml(result)
            return $sce.trustAsHtml(result);
        }

    })
</script>
</body>
</html>